<template>
	<view class="cOption ss-flex ss-row-between">
		<view :class="['label ss-flex-1 ss-line-1',{active:active}]">{{label}}</view>
		<uni-icons v-if="active" type="checkbox-filled" :size="size" :color="activeColor" />
		<view class="option" v-else-if="multi" :style="{'--size':size+'px'}">
			<view/>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import { reactive, computed, onBeforeUnmount,nextTick } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	const emit = defineEmits(['set'])
	const props = defineProps({
		label:{
			type:String,
			default:''
		},
		size:{
			type:[Number,String],
			default:20
		},
		activeColor: {
			type: String,
			default: '#1AC6A0'
		},
		multi:{
			type:Boolean,
			default:false
		},
		active:{
			type:Boolean,
			default:false
		}
	})
	const state = reactive({
	})
	onLoad((opt)=>{

	})
	function btnClick(){
		emit('set',{})
		sheep.$router.go('/pages/index/index')
	}
	
</script>

<style lang="scss" scoped>
	.cOption{
		width: 100%;
		height: 80rpx;
		flex:1;
		.label{
			font-size: 28rpx;
			color: #666;
		}
		.option{
			box-sizing: border-box;
			border-radius: 50%;
			height: var(--size);
			width: var(--size);
			min-width: var(--size);
			border: 1px solid #666;
			transform:scale(0.7);
		
		}
		.active{
			color: #333;
			font-weight: 600;
		}
	}
</style>